<template>
  <div class="main-container">
    <el-card class="box-card">
      <div class="logo">
        <img src="../assets/logo.png" alt="系统logo">
        <h1>社区养老院管理系统</h1>
      </div>

      <el-form ref="formRef" :model="formData" class="main-form">
        <el-form-item
          prop="username"
          :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]"
        >
          <el-input
            v-model="formData.username"
            placeholder="请输入账号"
            size="large"
            class="custom-input"
          >
            <template #prefix>
              <el-icon class="input-icon"><User /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item
          prop="password"
          :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
        >
          <el-input
            v-model="formData.password"
            type="password"
            placeholder="请输入密码"
            size="large"
            show-password
            class="custom-input"
          >
            <template #prefix>
              <el-icon class="input-icon"><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item
          prop="type"
          :rules="[{ required: true, message: '请选择用户类型', trigger: 'change' }]"
        >
          <el-select
            v-model="formData.type"
            placeholder="请选择用户类型"
            size="large"
            class="type-select"
          >
            <el-option label="管理员" value="ADMIN" />
            <el-option label="老人" value="ELDER" />
            <el-option label="护工" value="STAFF" />
            <el-option label="家属" value="FAMILY" />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            size="large"
            class="login-btn"
            @click="submitForm"
          >
            立即登录
          </el-button>
        </el-form-item>

        <div class="footer-links">
          <router-link to="/register" class="link">注册账号</router-link>
          <span class="divider">|</span>
          <router-link to="/retrievePassword" class="link">忘记密码</router-link>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {ElMessage} from 'element-plus';
import http from "@/utils/http.js";
import {User, Lock} from "@element-plus/icons-vue";
import router from "@/router/index.js";
import Particles from '@/components/Particles.vue'

const formData = ref({
  username: '',
  password: '',
  type: 'ADMIN'
});

const formRef = ref(null);
const submitForm = () => {
  formRef.value.validate((valid) => {
    if (!valid) {

    }
    http.post("/common/login", formData.value).then(res => {
      if (!res) {
        return
      }
      ElMessage({
        message: "登录成功，正在跳转",
        type: "success"
      });
      console.log(res.data)
      localStorage.setItem("token", res.data);
      http.get("/common/currentUser").then(res1 => {
        let currentUser = res1.data;
        localStorage.setItem("currentUser", JSON.stringify(currentUser));
        if (currentUser.type === "ADMIN") {
          window.location.href = "/admin";
        } else if (currentUser.type === "ELDER") {
          window.location.href = "/elder";
        } else if (currentUser.type === "STAFF") {
          window.location.href = "/staff";
        } else if (currentUser.type === "FAMILY") {
          window.location.href = "/family";
        }
      })
    })
  });
};
</script>

<style scoped>
@import '../assets/css/auth.css';

</style>
